<template>
  <div class="location-visualization">
    <div ref="locationRef" class="visualization-part">
      <div class="line" v-for="(lineItem, lineIndex) in 26" :key="lineItem">
        <div
          class="column"
          v-for="(columnItem, columnIndex) in 27"
          :key="columnItem"
          :style="{
            width: blockWidth + 'px',
            height: blockWidth + 'px',
            lineHeight: blockWidth * 0.8 + 'px',
            padding: blockWidth / 10 + 'px'
          }"
        >
          <div v-if="columnIndex === 0 && lineIndex === 0" class="block"></div>
          <div
            v-else-if="columnIndex === 0 && lineIndex !== 0"
            class="block block-column-1"
            :location="lineIndex + '-' + (27 - columnIndex)"
          >
            {{ lineIndex }}行
          </div>
          <div
            v-else-if="lineIndex === 0 && columnIndex !== 0"
            class="block block-line-1"
            :location="lineIndex + '-' + (27 - columnIndex)"
          >
            {{ 27 - columnIndex }}列
          </div>
          <div
            v-else
            class="block block-content"
            :location="lineIndex + '-' + (27 - columnIndex)"
            :title="getInfoFunc(lineIndex, 27 - columnIndex, 'text')"
          >
            <img
              v-if="getInfoFunc(lineIndex, 27 - columnIndex) !== ''"
              :src="imgArr[getInfoFunc(lineIndex, 27 - columnIndex)]"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="info-part" :style="{ paddingLeft: blockWidth * 2.5 + 'px' }">
      <el-radio-group v-model="floorIndex">
        <el-radio :value="1" border>第1层</el-radio>
        <el-radio :value="2" border>第2层</el-radio>
      </el-radio-group>

      <div class="img-info">
        <div class="title">图例</div>
        <div class="info-item" v-for="(item, index) in imgText" :key="index">
          <img v-if="index === 5" :src="imgArr[0]" alt="" />
          <img v-else :src="imgArr[index + 1]" alt="" />
          <span> {{ imgText[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import emptySpace from '@/assets/images/inventory-management/empty-space.png'
  import emptyTray from '@/assets/images/inventory-management/empty-tray.png'
  import closed from '@/assets/images/inventory-management/closed-space.png'
  import available from '@/assets/images/inventory-management/available-space.png'
  import problem from '@/assets/images/inventory-management/problem-space.png'
  import work from '@/assets/images/inventory-management/work-space.png'

  import { getProductLocation } from '@/api/wms'
  const locationRef = ref()
  const blockWidth = ref()
  const floorIndex = ref(1)
  const imgArr = [closed, emptySpace, emptyTray, available, work, problem]
  const imgText = ['空货位', '空托盘', '有货货位', '工作货位', '问题货位', '封闭货位']

  const listData = ref<any>([])
  const getList = () => {
    getProductLocation().then((res: any) => {
      listData.value = res.productLocations
    })
  }

  const getInfoFunc = (line, column, type = '') => {
    const item = listData.value.find((value) => {
      return value.locationID == floorIndex.value + '-' + column + '-' + line
    })

    if (!item) {
      return ''
    } else {
      const title =
        item.status === 3
          ? '品种:' +
            item.data[0].MaterialsCode +
            ';' +
            '  ' +
            '数量:' +
            item.data[0].PackCount +
            '; ' +
            ' ' +
            '批号:' +
            item.data[0].ProductBatch +
            '; ' +
            '入库时间:' +
            item.data[0].InDate
          : ''
      return type === 'text' ? title : item.status
    }
  }

  onMounted(() => {
    getList()
    console.log(document.documentElement.clientWidth)
    nextTick(() => {
      blockWidth.value = Math.max(30, Math.floor((document.documentElement.clientWidth - 660) / 26))
      console.log(locationRef.value)
      console.log(locationRef.value.offsetWidth)

      window.addEventListener('resize', () => {
        blockWidth.value = Math.max(
          30,
          Math.floor((document.documentElement.clientWidth - 660) / 26)
        )
      })
    })
  })
</script>
<style scoped lang="scss">
  .location-visualization {
    background-color: #fff;
    display: flex;

    .visualization-part {
      margin-bottom: 20px;

      .line {
        display: flex;
        font-size: 14px;

        .column {
          // flex: 1;
          text-align: center;
          box-sizing: border-box;

          .block {
            width: 100%;
            height: 100%;
          }
          .block-column-1,
          .block-line-1 {
            white-space: nowrap;
          }

          .block-content {
            background-color: #f5f5f5;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .info-part {
      min-width: 200px;
      padding: 20px 20px 0 0;

      .el-radio {
        margin-right: 12px;
      }

      .img-info {
        margin-top: 40px;
        color: rgba(0, 0, 0, 0.9);

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 20px;
        }

        .info-item {
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          align-items: center;

          img {
            width: 40px;
            height: 40px;
            margin-right: 15px;
          }
        }
      }
    }
  }
</style>
